<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-type-contents ddp-resize2 ddp-type2 popup-datastore-connect"  *ngIf="isShowPopup">
  <!-- close -->
  <a href="javascript:" class="ddp-btn-close" (click)="cancel()"></a>
  <!-- close -->
  <div class="ddp-icon-name">
    <div class="ddp-ui-name2 ddp-type3">
      {{'msg.storage.ui.conn.info' | translate}}
      <span class="ddp-txt-info">{{'msg.storage.ui.conn.info.description' | translate}}</span>
      <em class="ddp-bg-order-type"></em>
    </div>
  </div>
  <!-- import -->
  <div class="ddp-type-contents-in ddp-scroll">
    <!-- dp connection -->
    <div class="ddp-ui-dbconnect">
      <!-- connection info -->
      <div class="ddp-top-option">
        <div class="ddp-wrap-edit3 ddp-type">
          <!-- edit option -->
          <div class="ddp-ui-edit-option">
            <dl class="ddp-dl-option">
              <dt>
                {{'msg.comm.th.created.on' | translate}}
              </dt>
              <dd>
                {{originConnectionData.createdTime | mdate: 'YYYY-MM-DD HH:mm:ss'}}
              </dd>
              <dt>
                {{'msg.comm.ui.list.last' | translate}}
              </dt>
              <dd>
                {{originConnectionData.modifiedTime | mdate: 'YYYY-MM-DD HH:mm:ss'}}
              </dd>
            </dl>
          </div>
          <!-- //edit option -->
        </div>
        <!-- button -->
        <div class="ddp-ui-link" (click)="onClickDeleteConnection()">
          <a href="javascript:" class="ddp-btn-selection ddp-reject"><em class="ddp-icon-delete"></em>{{'msg.storage.btn.del.conn' | translate}}</a>
        </div>
        <!-- //button -->
      </div>
      <!-- connection info -->
      <!-- name -->
      <div class="ddp-wrap-edit2" [class.ddp-error]="isShowConnectionNameRequired" #connection_name_element>
        <label class="ddp-label-type ddp-bold">{{'msg.storage.th.conn.name' | translate}}</label>
        <input type="text" class="ddp-input-type" placeholder="{{'msg.storage.dconn.name.ph' | translate}}"
               [ngModel]="connectionName"
               (ngModelChange)="connectionName = $event; isShowConnectionNameRequired = false">
        <!-- error -->
        <span class="ddp-ui-error">{{nameErrorMsg}}</span>
        <!-- error -->
      </div>
      <!-- //name -->
      <app-connection [isDisableChangeConnectionType]="true"
                      [isUsedNameInitial]="true"
                      [connectionName]="connectionName"
                      (createdName)="connectionName = $event"></app-connection>
      <!-- permission -->
      <div class="ddp-wrap-edit2 ">
        <label class="ddp-label-type ddp-bold">{{'msg.storage.ui.permission' | translate}}</label>
        <!-- edit option -->
        <div class="ddp-ui-edit-option ddp-type">
          <div class="ddp-data-result">
            <ng-container *ngIf="published">
              {{'msg.storage.ui.conn.create.all.workspace' | translate}}
            </ng-container>
            <ng-container *ngIf="!published">
              <strong>{{linkedWorkspaces}}</strong> {{'msg.storage.ui.conn.create.workspace' | translate}}  <a href="javascript:" class="ddp-link-edit2" (click)="onClickSetWorkspace()">{{'msg.storage.btn.edit' | translate}}</a>
            </ng-container>
          </div>
          <label class="ddp-label-checkbox" (click)="onClickPublishConnection()">
            <input type="checkbox" [checked]="published">
            <i class="ddp-icon-checkbox"></i>
            <span class="ddp-txt-checkbox">{{'msg.storage.ui.permission.choice.dconn' | translate}}</span>
          </label>
        </div>
        <!-- //edit option -->
      </div>
      <!-- //permission -->
    </div>
    <!-- //dp connection -->
  </div>
  <!-- //import -->
  <!-- buttons -->
  <div class="ddp-ui-buttons">
    <a href="javascript:" class="ddp-btn-type-popup" (click)="cancel()">{{'msg.comm.btn.cancl' | translate}}</a>
    <a href="javascript:" class="ddp-btn-type-popup ddp-bg-black" (click)="done()">{{'msg.comm.btn.save' | translate}}</a>
  </div>
  <!-- //buttons -->
</div>

<!-- confirm modal -->
<app-delete-modal (deleteConfirm)="confirmModal($event)"></app-delete-modal>
<!-- workspace setting modal -->
<app-set-workspace-published (complete)="linkedWorkspaces = $event"></app-set-workspace-published>
